<template>
    <view>
        <u-popup :show="showPopup" title="更多筛选" :round="10" :closeOnClickOverlay="true" @close="onClosePopup">
            <view class="flex-center">
                <view class="head-line"></view>
            </view>
            <view class="jk-popup-content">
                <view class="flex-start-center">
                    <view class="option-item">
                        <view class="option-item-title">客户</view>
                        <view class="option-item-val">
                            <u-input :placeholderStyle="placeholderStyle" v-model="searchParams.customerName" :cursorSpacing="210" placeholder="客户" class="option-item-val"></u-input>
                        </view>
                    </view>
                    <view class="option-item">
                        <view class="option-item-title">品种</view>
                        <view class="option-item-val">
                            <u-input :placeholderStyle="placeholderStyle" v-model="searchParams.productName" placeholder="品种编号或名称" :cursorSpacing="220" class="option-item-val"></u-input>
                        </view>
                    </view>
                </view>
                <view class="flex-start-center">
                    <view class="option-item">
                        <view class="option-item-title">批次</view>
                        <view class="option-item-val">
                            <u-input :placeholderStyle="placeholderStyle" v-model="searchParams.batchCode" :cursorSpacing="210" placeholder="批次" class="option-item-val"></u-input>
                        </view>
                    </view>
                    <view class="option-item">
                        <view class="option-item-title">订单号</view>
                        <view class="option-item-val">
                            <u-input :placeholderStyle="placeholderStyle" v-model="searchParams.code" placeholder="订单号" :cursorSpacing="110" class="option-item-val"></u-input>
                        </view>
                    </view>
                </view>
            </view>
            <view class="flex-center footer-box">
                <view class="margin-right-10"><u-button type="danger" size="small" @click="onResetBtn">重置</u-button></view>
                <view><u-button type="primary" size="small" @click="onConfirmBtn">搜索</u-button></view>
            </view>
        </u-popup>
    </view>
</template>
<script>

export default {
    props: {
        popupState: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            showD: false,
            initTimeVal: '',
            showSelectMachinePopup: false,
            showPopup: false,
            searchParams: {
                productName: '',
                batchCode: '',
                productOrderCode: '',
                customerName: ''
            },
            placeholderStyle: {
                fontSize: '12px'
            }
        };
    },
    methods: {
        onResetBtn() {
            this.$set(this.searchParams, 'productName', '');
            this.$set(this.searchParams, 'batchCode', '');
            this.$set(this.searchParams, 'productOrderCode', '');
            this.$set(this.searchParams, 'customerName', '');
        },
        onConfirmBtn() {
            this.$emit('confirm', JSON.parse(JSON.stringify(this.searchParams)));
        },
        onClosePopup() {
            this.$emit('close', false);
        }
    },
    mounted() {
    },
    watch: {
        popupState(newVal) {
            this.showPopup = newVal;
            if (newVal) {
                this.initTimeVal = Date.now();
                this.showD = true; // 解决日期组件-起始无法默认到当前时间的bug
            }
        }
    }
}
</script>
<style scoped lang="scss">
$label_width: 80px;
.jk-popup-head {
    height: 36px;
    padding: 0 16px;
    box-sizing: border-box;
    border-bottom: solid 1px #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    //margin-bottom: 20rpx;
    .jk-popup-head-item-confirm {
        text-align: right;
    }
    .jk-popup-head-item {
        font-size: 14px;
        width: calc(100% / 3);
    }
    .jk-popup-head-title {
        height: 100%;
        font-size: 17px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
.head-line {
    width: 40px;
    height: 4px;
    background: #dcdee2;
    border-radius: 6px;
    margin: 15px 0;
}
.footer-box {
    width: 100%;
    padding: 0 10px 10px 10px;
    box-sizing: border-box;
}
.jk-popup-content {
    width: 100%;
    padding: 12px 16px;
    box-sizing: border-box;
    .option-item {
        width: 100%;
        height: 34px;
        display: flex;
        align-items: center;
        margin: 9px 0;
        font-size: 14px;
        .option-item-title {
            width: $label_width;
            text-align: right;
            padding-right: 10px;
        }
        .option-item-val {
            width: calc(100% - #{$label_width});
            height: 100%;
            box-sizing: border-box;
            background: #F2F4FF;
            border: solid 1px #F2F4FF;
            border-radius: 6px;
            display: flex;
            align-items: center;
        }
    }
}
</style>
